<template>
  <s-table
    ref="table"
    size="default"
    :columns="columns"
    :data="loadData"
  >
    <span slot="action" slot-scope="">
      <a>编辑</a>
      <a-divider type="vertical"/>
      <a-dropdown>
        <a class="ant-dropdown-link">
          更多 <a-icon type="down"/>
        </a>
        <a-menu slot="overlay">
          <a-menu-item>
            <a href="javascript:;">1st menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">2nd menu item</a>
          </a-menu-item>
          <a-menu-item>
            <a href="javascript:;">3rd menu item</a>
          </a-menu-item>
        </a-menu>
      </a-dropdown>
    </span>
  </s-table>
</template>

<script>
  import { STable } from '@/components'

  export default {
    components: {
      STable
    },
    data () {
      return {
        columns: [
          {
            title: '规则编号',
            dataIndex: 'no'
          },
          {
            title: '描述',
            dataIndex: 'description'
          },
          {
            title: '服务调用次数',
            dataIndex: 'callNo'
          },
          {
            title: '状态',
            dataIndex: 'status'
          },
          {
            title: '更新时间',
            dataIndex: 'updatedAt'
          },
          {
            table: '操作',
            dataIndex: 'action',
            scopedSlots: { customRender: 'action' }
          }
        ],
        // 查询条件参数
        queryParam: {},
        // 加载数据方法 必须为 Promise 对象
        loadData: parameter => {
         var ress = {
            data: [
              {
                id: 1,
                cover: 'https://gw.alipayobjects.com/zos/rmsportal/WdGqmHpayyMjiEhcKoVE.png',
                title: 'Alipay',
                description: '那是一种内在的东西， 他们到达不了，也无法触及的',
                status: 1,
                updatedAt: '2018-07-26 00:00:00'
              },
              {
                id: 2,
                cover: 'https://gw.alipayobjects.com/zos/rmsportal/zOsKZmFRdUtvpqCImOVY.png',
                title: 'Angular',
                description: '希望是一个好东西，也许是最好的，好东西是不会消亡的',
                status: 1,
                updatedAt: '2018-07-26 00:00:00'
              },
              {
                id: 3,
                cover: 'https://gw.alipayobjects.com/zos/rmsportal/dURIMkkrRFpPgTuzkwnB.png',
                title: 'Ant Design',
                description: '城镇中有那么多的酒馆，她却偏偏走进了我的酒馆',
                status: 1,
                updatedAt: '2018-07-26 00:00:00'
              },
              {
                id: 4,
                cover: 'https://gw.alipayobjects.com/zos/rmsportal/sfjbOqnsXXJgNCjCzDBL.png',
                title: 'Ant Design Pro',
                description: '那时候我只会想自己想要什么，从不想自己拥有什么',
                status: 1,
                updatedAt: '2018-07-26 00:00:00'
              },
              {
                id: 5,
                cover: 'https://gw.alipayobjects.com/zos/rmsportal/siCrBXXhmvTQGWPNLBow.png',
                title: 'Bootstrap',
                description: '凛冬将至',
                status: 1,
                updatedAt: '2018-07-26 00:00:00'
              },
              {
                id: 6,
                cover: 'https://gw.alipayobjects.com/zos/rmsportal/ComBAopevLwENQdKWiIn.png',
                title: 'Vue',
                description: '生命就像一盒巧克力，结果往往出人意料',
                status: 1,
                updatedAt: '2018-07-26 00:00:00'
              }
            ],
            pageSize: 10,
            pageNo: 1,
            totalPage: 6,
            totalCount: 57
          }
          return ress
        }
      }
    },
    methods: {
      edit (row) {
        // axios 发送数据到后端 修改数据成功后
        // 调用 refresh() 重新加载列表数据
        // 这里 setTimeout 模拟发起请求的网络延迟..
        setTimeout(() => {
          this.$refs.table.refresh() // refresh() 不传参默认值 false 不刷新到分页第一页
        }, 1500)
      }
    }
  }
</script>
